<template>
  <div class="login">
    <div class="login_form">
      <div class="login_con">
        <span style="font-size:24px;margin: 10px 0px">欢迎注册</span>
        <el-form ref="form" :model="registerForm" style="width:80%;">
          <!-- 用户名 -->
          <el-form-item>
            <el-input
              placeholder="请输入用户名"
              v-model="registerForm.username">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <!-- 账号 -->
          <el-form-item>
            <el-input
              placeholder="请输入账号"
              v-model="registerForm.account">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <!-- 输入密码 -->
          <el-form-item>
            <el-input
              placeholder="请输入密码"
              v-model="registerForm.password"
              show-password>
              <i slot="prefix" class="el-input__icon el-icon-edit"></i>
            </el-input>
          </el-form-item>

          <!-- 输入密码 -->
          <el-form-item>
            <el-input
              placeholder="再次输入密码"
              v-model="registerForm.repassword"
              show-password>
              <i slot="prefix" class="el-input__icon el-icon-edit"></i>
            </el-input>
          </el-form-item>

          <!-- 登录/注册按钮 -->
          <el-form-item style="text-align: center"> 
            <el-button style="width:45%;" type="primary" @click="register">注册</el-button>
            <el-button style="width:45%;"  @click="toLogin">返回登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import VueCaptcha from "vue-captcha-code";
export default {
  data() {
    return {
      registerForm: {
        username: '',
        account: '',
        password: '',
        repassword: '',
      }
    }
  },
  components:{
    VueCaptcha
  },
  methods: {
    // 跳转登录界面
    toLogin(){
      this.$router.push("/login")
    },
    // 注册
    register(){
      if (this.registerForm.username == '' || this.registerForm.account == '' || 
          this.registerForm.password == '' || this.registerForm.repassword == '') this.$message.error('有信息未填写');
      else if(this.registerForm.password != this.registerForm.repassword) this.$message.error('两次密码输入不一致');
      else{
        this.$axios.post('http://localhost:3000/user/register', this.registerForm)
          .then(res => {
            // console.log(res);
            this.$message({
              message: res.data.msg,
              type: res.data.msg == '注册成功' ? 'success' : 'error',
            });
            setTimeout(() => {
              res.data.msg == '注册成功' ? this.toLogin() : ''
            }, 1000)
          })
      }
    },
  }
}
</script>

<style >
.login{
  width: 100%;
  height: 100%;
  color: #666666;
  font-family: "宋体";

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.login_form{
  background: rgb(255, 255, 255, 0.85);
  width: 45%;
  height: 55%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .36), 0 0 12px rgba(0, 0, 0, .12);

  display: flex;
  justify-content: center;
  align-items: center;
}
.login_con{
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>